import { useState } from 'react';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    FileTextOutlined,
    PieChartOutlined,
    AppstoreOutlined,
    UserOutlined,
    LogoutOutlined,
    AlignLeftOutlined,
    AccountBookOutlined
} from '@ant-design/icons';
import { Button, Layout, Menu} from 'antd';
import DataOverview from './admin-children/dataOverview';
import UserManagement1 from './admin-children/userManagement/content';
import UserManagement2 from './admin-children/userManagement/header';
import ProductCategory1 from './admin-children/productCategory/content';
import ProductCategory2 from './admin-children/productCategory/header';
import AdManagement from './admin-children/admanagement/content';
import AddAd from './admin-children/admanagement/header';
import ProductManagement1 from './admin-children/productManagement/content';
import ProductManagement2 from './admin-children/productManagement/header';
import OrderManagement1 from './admin-children/orderManagement/content';
import OrderManagement2 from './admin-children/orderManagement/header';
const { Header, Sider, Content } = Layout;



const App = () => {
    const [collapsed, setCollapsed] = useState(false);
    const [currentContentItem, setcurrentContentItem] = useState('1'); // 跟踪当前选中的菜单项
    const [currentHeaderItem, setcurrentHeaderItem] = useState('1'); // 跟踪当前选中的菜单项
    const [isAdding, setIsAdding] = useState(false);
    const [filterConditions, setFilterConditions] = useState({});

    const handleMenuClick = ({ key }) => {
        setcurrentContentItem(key); // 更新当前选中的内容项
        setcurrentHeaderItem(key); // 更新当前选中的头部项
    };

    // 创建一个对象来映射菜单项和对应的内容组件
    const menuContentMap = {
        '1': <DataOverview />,
        '2': <UserManagement1 />,
        '3': (isAdding, setIsAdding, filterConditions) => <ProductManagement1 isAdding={isAdding} setIsAdding={setIsAdding} filterConditions={filterConditions} />,
        '4': <ProductCategory1 />,
        '5': <OrderManagement1 filterConditions={filterConditions} />,
        '6': (isAdding, setIsAdding) => <AdManagement isAdding={isAdding} setIsAdding={setIsAdding} />,
    };

    // 创建一个对象来映射菜单项和对应的头部组件
    const menuHeaderMap = {
        '1': '',
        '2': <UserManagement2 />,
        '3': <ProductManagement2 isAdding={isAdding} setIsAdding={setIsAdding} setFilterConditions={setFilterConditions} />,
        '4': <ProductCategory2 />,
        '5': <OrderManagement2 setFilterConditions={setFilterConditions} />,
        '6': <AddAd isAdding={isAdding} setIsAdding={setIsAdding} />,
    };

    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div style={{ color: 'white', padding: '12px', textAlign: 'center' }}>
                    重邮云超市管理系统
                </div>
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    onClick={handleMenuClick} // 添加点击事件处理函数
                    items={[
                        {
                            key: '1',
                            icon: <PieChartOutlined />,
                            label: '数据概况',
                        },
                        {
                            key: '2',
                            icon: <UserOutlined />,
                            label: '用户信息管理',
                        },
                        {
                            key: '3',
                            icon: <AppstoreOutlined />,
                            label: '商品信息管理',
                        },
                        {
                            key: '4',
                            icon: <AlignLeftOutlined />,
                            label: '商品分类管理',
                        },
                        {
                            key: '5',
                            icon: <FileTextOutlined />,
                            label: '订单信息管理',
                        },
                        {
                            key: '6',
                            icon: <AccountBookOutlined />,
                            label: '广告投放管理',
                        },
                    ]}
                />
            </Sider>
            <Layout>
                <Header
                    style={{
                        padding: 0,
                        background: '#fff', // 示例背景颜色，实际应使用theme中的颜色
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                        height: '16px',
                    }}
                >
                   
                    <Button
                        type="text"
                        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                        onClick={() => setCollapsed(!collapsed)}
                        style={{
                            fontSize: '16px',
                            width: 64,
                            height: 16,
                        }}
                    />
                    <Button
                        type="text"
                        icon={<LogoutOutlined />}
                        style={{
                            fontSize: '16px',
                        }}
                        onClick={() => {
                            // 添加退出逻辑，例如清除token并跳转到登录页
                            localStorage.removeItem('token');
                            window.location.href = '/'; // 假设根路径为登录页
                        }}
                    />
                </Header>
                
                {menuHeaderMap[currentHeaderItem]}

                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                        background: '#f5f5f5', // 示例背景颜色，实际应使用theme中的颜色
                        borderRadius: '4px', // 示例圆角，实际应使用theme中的值
                    }}
                >
                    {typeof menuContentMap[currentContentItem] === 'function'
                        ? menuContentMap[currentContentItem](isAdding, setIsAdding, filterConditions)
                        : menuContentMap[currentContentItem]
                    }
                </Content>
            </Layout>
        </Layout>
    );
};

export default App;
